市面上有很多種 CSS 預處理器能夠幫助我們撰寫更有結構及邏輯的 CSS,在協作大型專案時,使用變數也能讓 CSS 變得更容易維護,以下會簡單介紹一下 SCSS 的用法
Sass/SCSS
2007 年誕生的 Sass 是最早的預處理器,最初為了搭配 HAML 的寫法(一種縮排式 HTML 語法),也設計成縮排式寫法,所以在 Sass 的語法中不寫大括號及分號:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
但如此一來就沒辦法兼容原生的 CSS,所以才發展出來可以兼容 CSS 寫法的 SCSS,以下會簡單介紹 SCSS 的基本使用:
如何使用
在終端機執行安裝
npm install -g sass
查看版本
sass --version
建立 scss 檔案,並在終端機執行下列指令以自動轉換成 css
sass --watch input.scss output.css
// 第一個參數是要編譯的 scss,第二個參數是編譯出來的 css
使用變數
$primaryBtn: rgb(56, 146, 142)
header button {
background: $primaryBtn;
}
階層式管理
header {
button {
background: $primaryBtn;
&:howver {
content: "Helloooo"
}
}
}
引入
@import "./header.scss"
Mixin
@mixin flexCenter() {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
header {
@include flexCenter();
}
Mixin 和變數的搭配使用
@mixin flexCenter($direction, $background) {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-display: $direction;
background: $background;
}
header {
@include flexCenter(column);
background: lightblue;
}
div {
@include flexCenter(row, blue);
}
繼承
main.sass
header {
background: red;
}
style.scss
@import "./main"
.contact {
@extend header;
}
運算
.contact {
width: 100% - 20%;
}